import React, { useState } from 'react';
import { Modal, Button, Input, Form } from 'antd';

function Add() {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <Button type="primary" onClick={showModal}>
                添加
            </Button>
            <Modal
                title="添加"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button className="Ok" onClick={handleOk}>确认</Button>,
                    <Button onClick={handleCancel}>取消</Button>
                ]}>
                <p>角色名称：</p>
                <p>
                    <Form.Item>
                        <Input placeholder="请输入角色名称" />
                    </Form.Item>
                </p>
                <p>角色描述：</p>
                <p>
                    <Form.Item>
                        <Input placeholder="请输入角色描述" />
                    </Form.Item>
                </p>
                <p>角色账号：</p>
                <p>
                    <Form.Item>
                        <Input placeholder="请输入账号" />
                    </Form.Item>
                </p>
                <p>角色密码：</p>
                <p>
                    <Form.Item>
                        <Input placeholder="请输入密码" />
                    </Form.Item>
                </p>
            </Modal>
        </div>
    )
}
export default Add;